<!doctype html>
<html>

	<head>
		<!-- 页面字符编码 -->
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<title></title>

		<link href="css/mui.min.css" rel="stylesheet" />
		<link href="css/comm.css" rel="stylesheet" />
		<link href="css/layout.css" rel="stylesheet" />
		<link href="css/iconfont.css" rel="stylesheet" />
		<link rel="stylesheet" href="css/calendar.css">

		<style type="text/css">
			ul,
			ol,
			li {
				list-style: none;
				padding: 0;
				margin: 0;
			}
			
			#demo {
				width: 320px;
				margin: 0 auto;
			}
			
			p {
				margin: 0;
			}
			
			#dt {
				margin: 30px auto;
				height: 28px;
				width: 200px;
				padding: 0 6px;
				border: 1px solid #ccc;
				outline: none;
			}
		</style>
	</head>

	<body style="background-color: #fff;">
		<!-- 头部 S-->
		<header class="mui-bar mui-bar-nav  mui-bar-bom mui-bar-white">
			<a class="iconfont icon-fanhui mui-pull-left"></a>
			<h1 class="mui-title mui-bar-title">饭局排期</h1>
		</header>
		<!-- 头部 E -->
		<div class="mui-content">
			<div class="mui-scroll-wrapper mscrollSet mui-scroll-top">
				<div class="mui-scroll">
					<div class="mui-schedules">
						<div id="demo">
							<div id="ca"></div>
						</div>
						<div class="mui-sm">
							<div>“<i>1</i>”表示可订餐的日期</div>
							<div> “<i class="dot"></i>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;” 表示有订餐的日期
							</div>
						</div>
						<div class="mui-fjpq-cont">
						
						<ul class="mui-table-view mui-sjd-media mui-date-one">
							<li class="mui-table-view-cell bm" id="ykx">
								<a href=""><i>早</i>09:00 已开席<span class="mui-pull-right">编号：20161012012 <em class="iconfont icon-xiayibu"></em></span></a>
							</li>
							<li class="mui-table-view-cell bm" id="dkx">
								<a href=""><i>中</i>10:00 待开席<span class="mui-pull-right">编号：20161012012 <em class="iconfont icon-xiayibu"></em></span></a>
							</li>
							<li class="mui-table-view-cell bm">
								<a href=""><i>晚</i>18:00 待预定</a>
							</li>
							<li class="mui-table-view-cell bm" id="ykx">
								<a href=""><i>宵</i>20:00 休息</a>
							</li>
						</ul>
							
						</div>
						<div class="mui-sj-btn">
							<div>
								<button>查看订单</button>
							</div>
							<div id="hd">
								<button>修改排期</button>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>

		<script src="js/mui.min.js"></script>
		<script type="text/javascript" src="js/jquery-2.1.0.js"></script>
		<script src="js/scroll-wrapper.js"></script>
		<script src="js/calendar.js"></script>
		<script type="text/javascript">
			//加小红点
			$('#ca').calendar({
				width: 320,
				height: 320,
				data: [{
					date: '2016/12/24',
					value: '有订餐'
				}, {
					date: '2016/12/25',
					value: '有订餐'
				}, {
					date: '2016/11/24',
					value: '有订餐'
				}],
				onSelected: function(view, date, data) {
					console.log('view:' + view)
						//					alert('date1:' + date)
					console.log('data:' + (data || 'None'));
				}
			});
			$(".calendar .days li[data-calendar-day]").click(function() {
				$(".mui-fjpq-cont").show();
			});
		</script>
	</body>

</html>